import { getRights, getRoles } from '../../api/roles';
import { Button, Table, message } from 'antd';
import { EditOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons';
import { useEffect, useRef, useState } from 'react'
import RowRender from './components/RowRender';
import SetRights from './components/set-rights';
function Roles() {
    let setRightsRef: { current: any } = useRef();
    let [messageApi, context] = message.useMessage();
    let [rolesList, setRolesList] = useState([]);
    //定义加载状态
    let [loading, setLoading] = useState(false);
    //  权限列表
    let [rigthsList, setRightsList] = useState<RightsType[]>([]);
    let getDataList = async () => {
        setLoading(true)
        let res: ResponsType = await getRoles();
        setRolesList(res.data.data)
        setLoading(false)
        // 使用三重for循环 修改每个chlidren属性名
        res.data.data.forEach((item: any) => {
            item.list = item.children;
            delete item.children;
            item.list.forEach((tow: any) => {
                tow.list = tow.children
                delete tow.children;
                tow.list.forEach((three: any) => {
                    three.list = three.children
                    delete three.children;
                })
            })
        })
    }
    // 获取所有权限列表
    let getRightsList = async () => {
        let res: ResponsType = await getRights('tree');
        setRightsList(res.data.data)
    }
    useEffect(() => {
        getDataList();
        getRightsList();
    }, [])
    // 使用递归处理列表数据 修改每个children属性名
    // function rolesDeep(data:any[],newData:any[]){
    //     data.forEach(item=>{
    //         if(item.roleName){
    //             let obj = {
    //                 id:item.id,
    //                 roleDesc:item.roleDesc,
    //                 roleName:item.roleName,
    //                 list:[]
    //             }
    //             newData.push(obj)
    //             if(item.children){
    //                 rolesDeep(item.children,obj.list)
    //             }
    //         }else{
    //             let obj ={
    //                 id:item.id,
    //                 path:item.path,
    //                 authName:item.authName,
    //                 list:[]
    //             }
    //             newData.push(obj)
    //             if(item.children){
    //                 rolesDeep(item.children,obj.list)
    //             }
    //         }
    //     })
    //     return newData
    // }
    // let tableList =rolesDeep(rolesList,[]);

    let columns = [
        {
            dataIndex: "id",
            title: "角色id",
            width: 100
        },
        {
            dataIndex: "roleName",
            title: "角色名称"
        },
        {
            dataIndex: "roleDesc",
            title: "角色描述"
        },
        {
            dataIndex: "actions",
            title: "操作",
            width: 500,
            render(text: boolean, recoder: RolesTableItem) {
                return <div>
                    <Button type='primary' size='small' icon={<EditOutlined />}>编辑</Button>&nbsp;&nbsp;
                    <Button type='primary' size='small' danger icon={<DeleteOutlined />}>删除</Button> &nbsp;&nbsp;
                    <Button type='primary' size='small' icon={<SettingOutlined />} onClick={() => {
                        setRightsRef.current.init(rigthsList, recoder.list, recoder.id);
                    }}>分配权限</Button>
                </div>
            }
        },
    ]
    return (
        <div>
            {context}
            <div>
                <Button type="primary">添加角色</Button>
            </div>
            <div style={{ margin: "20px 0" }}>
                <Table bordered columns={columns} dataSource={rolesList} rowKey='id' scroll={{ x: 500 }} loading={loading} expandedRowRender={(recoder: RolesTableItem) => {
                    return <RowRender recoder={recoder} over={(res: ResponsType) => {
                        if (res.data.meta.status === 200) {
                            messageApi.success(res.data.meta.msg)
                            getDataList();
                        }
                    }}></RowRender>
                }}></Table>
            </div>
            <SetRights ref={setRightsRef} rigthsList={rigthsList} over={(res: ResponsType) => {
                if (res.data.meta.status === 200) {
                    messageApi.success(res.data.meta.msg)
                    getDataList();
                }
            }}></SetRights>
        </div>
    )

}

export default Roles;